import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import '../../core/constants.dart';
import '../providers/coin_provider.dart';
import '../../features/shop/coin_shop_page.dart';
import 'animated_route.dart';

class CoinBalanceWidget extends ConsumerWidget {
  final bool showLabel;
  final double fontSize;
  final Color? textColor;
  final Color? iconColor;
  final bool isClickable;

  const CoinBalanceWidget({
    super.key,
    this.showLabel = true,
    this.fontSize = 16,
    this.textColor,
    this.iconColor,
    this.isClickable = true,
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final coinBalance = ref.watch(coinBalanceProvider);
    
    final widget = Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
      decoration: BoxDecoration(
        color: (textColor == Colors.white) 
          ? Colors.white.withOpacity(0.2)
          : AppConstants.PRIMARY_BLUE.withOpacity(0.1),
        borderRadius: BorderRadius.circular(20),
        border: Border.all(
          color: (textColor == Colors.white) 
            ? Colors.white.withOpacity(0.3)
            : AppConstants.PRIMARY_BLUE.withOpacity(0.3),
          width: 1,
        ),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          FaIcon(
            FontAwesomeIcons.coins,
            size: fontSize * 0.9,
            color: iconColor ?? textColor ?? AppConstants.PRIMARY_BLUE,
          ),
          const SizedBox(width: 6),
          Text(
            coinBalance.toString(),
            style: TextStyle(
              fontSize: fontSize,
              fontWeight: FontWeight.bold,
              color: textColor ?? AppConstants.PRIMARY_BLUE,
            ),
          ),
          if (showLabel) ...[
            const SizedBox(width: 4),
            Text(
              'Coins',
              style: TextStyle(
                fontSize: fontSize * 0.8,
                color: (textColor ?? AppConstants.PRIMARY_BLUE).withOpacity(0.8),
              ),
            ),
          ],
          if (isClickable) ...[
            const SizedBox(width: 4),
            Icon(
              Icons.add_circle_outline,
              size: fontSize * 0.9,
              color: (textColor ?? AppConstants.PRIMARY_BLUE).withOpacity(0.7),
            ),
          ],
        ],
      ),
    );
    
    if (isClickable) {
      return GestureDetector(
        onTap: () {
          Navigator.push(
            context,
            ShopPageRoute(child: const CoinShopPage()),
          );
        },
        child: widget,
      );
    }
    
    return widget;
  }
} 